<section ng-show="open" ng-keyup="keyUp($event)" tabindex="1" class="modal modal-animation ng-hide" id="user-modal" ng-controller="UserCtrl">

  <header ng-switch="action">
    <a class="fa fa-times close-modal" ng-click="close()"></a>
    <h2 ng-switch-when="add" translate="USERS.USERS.DETAILS.NEWCAPTION"><!-- Create user --></h2>
    <h2 ng-switch-when="edit" translate="USERS.USERS.DETAILS.EDITCAPTION" translate-values="{{user}}"><!-- User details - {{name}} --></h2>
  </header>

  <nav class="modal-nav" id="modal-nav">
    <a ng-click="openTab('user')" data-modal-tab="user" ng-class="{ active: tab == 'user' }" translate="USERS.USERS.DETAILS.TABS.USER">
      <!-- User -->
    </a>
    <a ng-click="openTab('internalRoles')"
       data-modal-tab="internalroles"
       ng-class="{ active: tab == 'internalRoles' }"
       translate="USERS.USERS.DETAILS.TABS.ROLES"
       class="wider"
       title="{{ 'USERS.USERS.DETAILS.DESCRIPTION.ROLES' | translate }}">
      <!-- Managable Roles -->
    </a>
    <a ng-click="openTab('externalRoles')"
       data-modal-tab="externalroles"
       ng-class="{ active: tab == 'externalRoles' }"
       ng-style="{ display: action === 'edit' ? 'inline-block' : 'none'}"
       translate="USERS.USERS.DETAILS.TABS.EXTERNALROLES"
       ng-if="showExternalRoles"
       title="{{ 'USERS.USERS.DETAILS.DESCRIPTION.EXTERNALROLES' | translate }}">
      <!-- Unmanagable Roles -->
    </a>
    <a ng-click="openTab('effectiveRoles')"
       data-modal-tab="effectiveRoles"
       ng-class="{ active: tab == 'effectiveRoles' }"
       ng-style="{ display: action === 'edit' ? 'inline-block' : 'none'}"
       translate="USERS.USERS.DETAILS.TABS.EFFECTIVEROLES"
       title="{{ 'USERS.USERS.DETAILS.DESCRIPTION.EFFECTIVEROLES' | translate }}">
      <!-- Effective Roles = Internal + External -->
    </a>
  </nav>

  <a ng-click="showAdjacent(true)" ng-if="hasAdjacent(true)"><i class="arrow fa fa-chevron-left"></i></a>
  <a ng-click="showAdjacent()" ng-if="hasAdjacent()"><i class="arrow fa fa-chevron-right"></i></a>

  <form name="userForm">
    <div class="modal-content" data-modal-tab-content="user">
      <div class="modal-body">
        <div class="form-container">
          <div data-admin-ng-notifications="" context="user-form"></div>
          <div class="row">
            <label>{{'USERS.USERS.DETAILS.FORM.USERNAME' | translate }}<i class="required"> *</i></label>
            <input type="text"
                   name="username"
                   required
                   placeholder="{{ 'USERS.USERS.DETAILS.FORM.USERNAME' | translate }}..."
                   sanitize-xml="user.username"
                   ng-disabled="action == 'edit'"
                   ng-init="blurred.username = false"
                   ng-model="user.username"
                   ng-blur="blurred.username = true"
                   ng-change="checkUserUniqueness()"
                   ng-class="{ disabled: action == 'edit', error: blurred.username && !userForm.username.$valid }">
          </div>
          <div class="row">
            <label>{{'USERS.USERS.DETAILS.FORM.NAME' | translate }}<i ng-if="action != 'edit'" class="required"> *</i></label>
            <input type="text"
                   name="name"
                   required
                   placeholder="{{ 'USERS.USERS.DETAILS.FORM.NAME' | translate }}..."
                   sanitize-xml="user.name"
                   ng-disabled="!manageable"
                   ng-init="blurred.name = false"
                   ng-model="user.name"
                   ng-blur="blurred.name = true"
                   ng-class="{ disabled: !manageable, error: blurred.name && !userForm.name.$valid }">
          </div>
          <div class="row">
            <label>{{ 'USERS.USERS.DETAILS.FORM.EMAIL' | translate }}<i ng-if="action != 'edit'" class="required"> *</i></label>
            <input type="email"
                   name="email"
                   required
                   placeholder="{{ 'USERS.USERS.DETAILS.FORM.EMAIL' | translate }}..."
                   ng-disabled="!manageable"
                   ng-init="blurred.email = false"
                   ng-model="user.email"
                   ng-blur="blurred.email = true"
                   ng-class="{ disabled: !manageable, error: blurred.email && !userForm.email.$valid }">
          </div>

          <div class="row"  >
            <label>{{ 'USERS.USERS.DETAILS.FORM.PASSWORD' | translate }}<i ng-if="action != 'edit'" class="required"> *</i></label>
            <input type="password"
                   name="password"
                   placeholder="{{ 'USERS.USERS.DETAILS.FORM.PASSWORD' | translate }}..."
                   admin-ng-pw-check="user.repeatedPassword"
                   ng-required="action != 'edit'"
                   ng-disabled="!manageable"
                   ng-init="blurred.password = false"
                   ng-model="user.password"
                   ng-blur="blurred.password = true"
                   ng-class="{ disabled: !manageable, error: blurred.password && !userForm.password.$valid }">

            <input type="password"
                   placeholder="{{ 'USERS.USERS.DETAILS.FORM.REPEAT_PASSWORD' | translate }}..."
                   ng-disabled="!manageable"
                   ng-required="action != 'edit'"
                   ng-model="user.repeatedPassword"
                   ng-class="{ disabled: !manageable, error: blurred.password && (user.repeatedPassword !== user.password || !userForm.password.$valid) }">

            <div>
              <pw-strength ng-model="user.password"></pw-strength>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="modal-content" data-modal-tab-content="internalRoles">
      <div class="modal-body">
        <div class="form-container">
          <div data-admin-ng-notifications="" context="user-form"></div>
          <admin-ng-select-box resource="role" data-disabled="!manageable" data-height="21em"></admin-ng-select-box>
        </div>
      </div>
    </div>
    <div class="modal-content" data-modal-tab-content="externalRoles">
      <div class="modal-body">
        <div class="form-container multi-select-container">
          <label translate="USERS.USERS.DETAILS.TABS.EXTERNALROLES"></label>
          <p>{{ 'USERS.USERS.DETAILS.DESCRIPTION.EXTERNALROLES' | translate }}</p>

          <a ng-click="clearSearchFieldExternal()" class="clear" ng-show="role.searchable"></a>
          <input type="text"
                 id="search_external"
                 class="search"
                 placeholder="{{ 'TABLE_FILTERS.PLACEHOLDER' | translate  }}"
                 ng-show="role.searchable"
                 ng-disabled="disabled"
                 ng-class="{ disabled: disabled }"
                 ng-model="searchFieldExternal">

          <select multiple
                  ng-options="item.name for item in role.external | filter: {name: searchFieldExternal} | orderBy: [groupSort, 'name']"
                  ng-model="selectedExternals"
                  ng-style="getHeight()">
          </select>
        </div>
      </div>
    </div>
    <div class="modal-content" data-modal-tab-content="effectiveRoles">
      <div class="modal-body">
        <div class="form-container multi-select-container">
          <label translate="USERS.USERS.DETAILS.TABS.EFFECTIVEROLES"></label>
          <p>{{ 'USERS.USERS.DETAILS.DESCRIPTION.EFFECTIVEROLES' | translate }}</p>

          <a ng-click="clearSearchFieldEffective()" class="clear" ng-show="role.searchable"></a>
          <input type="text"
                 id="search_effective"
                 class="search"
                 placeholder="{{ 'TABLE_FILTERS.PLACEHOLDER' | translate  }}"
                 ng-show="role.searchable"
                 ng-disabled="disabled"
                 ng-class="{ disabled: disabled }"
                 ng-model="searchFieldEffective">

          <select multiple
                  ng-options="item.name for item in role.derived.concat(role.external.concat(role.selected)) | filter: customEffectiveFilter() | orderBy: [groupSort, 'name']"
                  ng-model="selectedEffective"
                  ng-style="getHeight()">
          </select>
        </div>
      </div>
    </div>
  </form>

  <footer>
    <a ng-click="submit()" class="submit" ng-class="{disabled: !(userForm.$valid && manageable)}" translate="SUBMIT">
      <!-- Submit -->
    </a>
    <a ng-click="close()" class="cancel" translate="CANCEL"><!-- Cancel --></a>
  </footer>
</section>
